{% extends 'base_backend.html' %}
{% load static %}
{% load my_filter %}

{% block header_tail %}
    <link rel="stylesheet" href="{% static 'zhongbao/zhongbao_admin/css/style.css' %}">
    <link rel="stylesheet" href="{% static 'zhongbao/zhongbao_admin/css/iconfont.css' %}">
    <link rel="stylesheet" href="{% static 'public/bootstrap-table/bootstrap-table.min.css' %}">
    <link rel="stylesheet" href="{% static 'zhongbao/config/css/main.css' %}">
    <link href="{% static 'zhongbao/zhongbao_admin/css/tranfer.css' %}" rel="stylesheet">

    <script src="{% static 'plugins/vue1/vue.js' %}"></script>
    <style>
        .login-banner {
            width: 100%;
            background: url("{% static 'public/img/banner2.jpg' %}") center bottom/cover no-repeat;
        }
    </style>
{% endblock header_tail %}

{% block section_content %}
<div class="col-md-8">
    <div class="box-header with-border">
        <h3 class="box-title">任务管理</h3>
    </div>
    <!-- form start -->
    <div class="box box-primary">
        <div class="box-body">
            <div id="transferContainer" style="height: 700px;width: 100%;"></div>
        </div>
        <div class="box-body">
            <button id='btn' class="btn btn-primary">提交修改</button>
            <button id='refresh' class="btn btn-primary">刷新</button>
        </div>
    </div>
</div>

        <!-- 中间点击按钮图标没显示出来没关系  是因为引入的cdn问题  正常下载引入bootstrap.css的话没问题的 -->
<!-- 此处演示的数据源为一个 用falg去区分在哪个里面 -->
<script src="{% static 'plugins/jQuery/jquery-3.3.1.min.js' %}"></script>
<script src="{% static 'public/bootstrap-table/bootstrap-table.min.js' %}"></script>
<script src="{% static 'public/bootstrap-table/locale/bootstrap-table-zh-CN.min.js' %}"></script>
<script src="{% static 'zhongbao/zhongbao_admin/js/Transfer.js' %}"></script>
<script type="text/javascript">
    function getUrlParam(name){
        var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg);  //匹配目标参数
        if (r!=null) return unescape(r[2]); return null; //返回参数值
    }

    var $j = jQuery.noConflict( true );
    $j('#transferContainer').transfer({
        titles: ['待分配任务', '已分配任务'],
        search: true,
        uniqueId: "taskId", //唯一id
        url: "{% url 'zhongbao_admin:task_allocation_data' %}",
        maxSelect: 10,
        diffKey: 'flag',
        unselectColumns: [{
            field: 'flag',
            checkbox: true
        }, {
            field: 'taskId',
            title: '任务id'
        }, {
            field: 'taskName',
            title: '任务名称'
        }, {
            field: 'taskReward',
            title: '任务赏金'
        }]
    });

    $j('#btn').click(function() {
        var aid = getUrlParam("aid");
        var data = $j('#transferContainer').transfer('getData', 'selectData', 'taskId');
        console.log(data);
        $.post(
            "{% url 'zhongbao_admin:task_allocation' %}",
            {"aid":aid, "data":data},
            function(response){
                window.location.reload();
            }
        );
    });

    $j('#refresh').click(function() {
        $j('#transferContainer').transfer('refresh')
    })
</script>
{% endblock section_content %}
